<template>
	<view class="content">

		<view id='contentView'>

			<view>
				<view class="uni-list">


					<view class="uni-list-cell">

						<view class="propertyBox">
							<view class="uni-list-cell-left">
								当前课程:
							</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
								</picker>
							</view>
						</view>

					</view>


					<view class="uni-list-cell-left">
						全部学生:
					</view>

					<view class="propertyBox">
						<input class="uni-input" v-model="addStudentName" focus placeholder="请输入学生名称" />
						<input class="uni-input" v-model="addStudentPassword" focus placeholder="请输入学生学号" />
					</view>

					<button type="default" @click="addStudentUser">添加新的学生</button>
					
                    <view class="propertyBox">
						<input class="uni-input" v-model="deleteStudentName" focus placeholder="请输入要删除的学生名称" />
					</view>
                    <button type="default" @click="DeleteStudentUser">删除学生</button>


					<view style='background-color:antiquewhite;' class="uni-padding-wrap uni-common-mt">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
							@scrolltolower="lower" @scroll="scroll">
							<view  v-for="item in studentAllList">姓名：{{item.userName}}</view>
						</scroll-view>
					</view>

					<view class="uni-list-cell-left">
						当前课程学生:
					</view>
					<input class="uni-input" v-model="addStudentToCourseName" focus placeholder="请输入要添加da到课程的学生名称" />
					<button type="default" @click="addStudentToCourse">添加新的学生到课程</button>
					<view style='background-color:antiquewhite;height: 300upx;' class="uni-padding-wrap uni-common-mt">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
							@scrolltolower="lower" @scroll="scroll">
							<view  v-for="item in courseStudentList">姓名：{{item.userName}}</view>
						</scroll-view>
					</view>


				</view>
			</view>
		</view>



		<view id='buttomNavigation'>

			<!-- 这是老师的页面 -->
			<view class="nav" @click="()=>{clickNavi('管理课程')}">管理课程</view>
			<view class="nav" @click="()=>{clickNavi('管理学生')}">管理学生</view>
			<view class="nav" @click="()=>{clickNavi('个人信息')}">个人信息</view>




		</view>
	</view>
</template>

<script>
	var self, mapCtx
	export default {
		data() {
			return {
				addStudentName:'',
				deleteStudentName:'',
				addStudentPassword:'',
				studentAllList: [],
				courseStudentList: [],
				addStudentToCourseName: '',
				scrollTop: 0,
				id: 0, // 使用 marker点击事件 需要填写id
				courseList: [],
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				index: 0,
				array: ['数据等待加载'],
				punchCardStudentInfo: [],
			}
		},
		onLoad() {

			// 这里应该是尝试拉取数据的地方
			console.log("当前尝试拉取数据");
			// 获取当前
			mapCtx = wx.createMapContext('myMap')
			this.getAllStudeng();


			uni.request({
				url: uni.getStorageSync('serviceIp') + '/teacher/getAllCourse',
				method: 'POST',
				header: {
					'user': uni.getStorageSync("user")
				},
				//请求成功后
				success: (res) => {
					// 请求成功之后将数据给Inf
                     console.log('getAllCourse',res);
					if (res.data.status) {

						this.courseList = res.data.data;
						let courseName = [];
                         
						res.data.data.forEach(item => {

							courseName.push(item.courseInfo.courseName);

						})

						/**
						 * 这里赋值第一个课程
						 * 
						 */
						this.array = courseName;

						this.updateCourse(0, res);
						this.getCourseStudent();


					} else {

						uni.showToast({
							title: '获取课程失败!',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})

					}



				},
				fail: (res) => {
					console.log("查看fail返回的信息,", res);
				}
			});

		},
		onShow() {
			console.log("当前尝试拉取数据");
			uni.hideTabBar({});
			
			this.getAllStudeng();
			
			
			uni.request({
				url: uni.getStorageSync('serviceIp') + '/teacher/getAllCourse',
				method: 'POST',
				header: {
					'user': uni.getStorageSync("user")
				},
				//请求成功后
				success: (res) => {
					// 请求成功之后将数据给Inf
			         console.log('getAllCourse',res);
					if (res.data.status) {
			
						this.courseList = res.data.data;
						let courseName = [];
			             
						res.data.data.forEach(item => {
			
							courseName.push(item.courseInfo.courseName);
			
						})
			
						/**
						 * 这里赋值第一个课程
						 * 
						 */
						this.array = courseName;
			
						this.updateCourse(0, res);
						this.getCourseStudent();
			
			
					} else {
			
						uni.showToast({
							title: '获取课程失败!',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})
			
					}
			
			
			
				},
				fail: (res) => {
					console.log("查看fail返回的信息,", res);
				}
			});
			
		},
		methods: {
			DeleteStudentUser(){
				
				
				uni.request({
					url: uni.getStorageSync('serviceIp') + '/teacher/deleteStudent',
					method: 'DELETE',
					header: {
						'user': uni.getStorageSync("user")
					},
					data: {
						studentName: this.deleteStudentName
					},
					//请求成功后返回
					success: (res) => {
						// 请求成功之后将数据给Info
						console.log(res);
						if (res.data.status) {
				
				
							this.deleteStudentName = '';
							this.getAllStudeng();
							uni.showToast({
								title: '删除成功!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
				
						} else {
				
							uni.showToast({
								title: '删除失败!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
				
				
						}
				
				
					},
					fail: (res) => {
						console.log("查看fail返回的信息,", res);
					}
				});
				
				
				
			},
			getCourseStudent() {

                console.log('this.courseList[this.index].courseInfo.courseId',this.courseList[this.index].courseInfo.courseId);
				uni.request({
					url: uni.getStorageSync('serviceIp') + '/teacher/getCourseStudent',
					method: 'POST',
					header: {
						'user': uni.getStorageSync("user")
					},
					data: {
						courseId: this.courseList[this.index].courseInfo.courseId
					},
					//请求成功后返回
					success: (res) => {
						// 请求成功之后将
                        console.log('getCourseStudent',res);
						if (res.data.status) {
							this.courseStudentList = res.data.data;
						}




					},
					fail: (res) => {
						console.log("查看fail返回的信息,", res);
					}
				});

			},
			addStudentToCourse() {

				uni.request({
					url: uni.getStorageSync('serviceIp') + '/teacher/addCourseStudent',
					method: 'POST',
					header: {
						'user': uni.getStorageSync("user")
					},
					data: {
						studentName: this.addStudentToCourseName,
						courseId: this.courseList[this.index].courseInfo.courseId
					},
					//请求成功后返回
					success: (res) => {
						// 请求成功之后将数据给Info
						console.log(res, '');
						if (res.data.status) {

							this.getCourseStudent();

							uni.showToast({
								title: '导入成功!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})


						} else {

							uni.showToast({
								title: '导入失败!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})


						}


					},
					fail: (res) => {
						console.log("查看fail返回的信息,", res);
					}
				});

			},
			getAllStudeng() {

				uni.request({
					url: uni.getStorageSync('serviceIp') + '/teacher/getAllStudent',
					method: 'GET',
					header: {
						'user': uni.getStorageSync("user")
					},

					//请求成功后返回
					success: (res) => {
						// 请求成功之后将数据给Info
						console.log(res, '');
						if (res.data.status) {

							this.studentAllList = res.data.data;

						}


					},
					fail: (res) => {
						console.log("查看fail返回的信息,", res);
					}
				});


			},
			addStudentUser() {

				uni.request({
					url: uni.getStorageSync('serviceIp') + '/teacher/addStudent',
					method: 'POST',
					header: {
						'user': uni.getStorageSync("user")
					},
					data: {
						studentName: this.addStudentName,
						passWord: this.addStudentPassword
					},
					//请求成功后返回
					success: (res) => {
						// 请求成功之后将数据给Info
						console.log(res);
						if (res.data.status) {


							this.addStudentName = '';
							this.addStudentPassword = '';
							this.getAllStudeng();
							uni.showToast({
								title: '添加成功!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})

						} else {

							uni.showToast({
								title: '添加失败!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})


						}


					},
					fail: (res) => {
						console.log("查看fail返回的信息,", res);
					}
				});



			},
			createCouse() {

			},
			lower() {

			},
			scroll() {

			},
			upper() {

			},
			updateCourse(e, res) {


				this.scope = res.data.data[e].courseInfo.punchCardScope;

				this.planNumber = res.data.data[e].punchCardStudentPlanInfo.length;
				this.punchCardNumber = res.data.data[e].punchCardStudentInfo.length;

				this.timeIndex = res.data.data[e].courseInfo.length;
				this.time = res.data.data[e].courseInfo.punchCardDate;


				console.log('res.data.data', res.data.data);

			},
			getCenterLanLat() {
				this.mapContext = uni.createMapContext("myMap", this);


				this.mapContext.getCenterLocation({
					type: 'wgs84',
					success: (res) => {
						let address = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						this.longitude = address.longitude;
						this.latitude = address.latitude;

						// 创建地图坐标对象
						var point = new plus.maps.Point(address.longitude, address.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];

								let CityString = '';

								addressList.forEach(item => {
									CityString = CityString + item + "-";
								});
								this.addressListZ1 = CityString;

								console.log("addressList", addressList, this.addressListZ1);

							},
							function(e) {
								console.log("失败回调", e);
							}
						);


						this.covers[0].longitude = address.longitude;
						this.covers[0].latitude = address.latitude;


						this.$emit('longLatDetail', address)
						console.log('已经更新完数据')
					},
					fail: (err) => {


					}
				})
			},
			regionchange(event) {
				console.log('regionchange', event)
				if (event.type == 'regionchange') {
					this.getCenterLanLat()
				}

			},
			bindPickerChange(e) {
				this.index = e.target.value;
				this.getCourseStudent();
			},
			clickNavi(e) {

				console.log('查看当前点击事件', e);

				if (e == '个人信息') {

					uni.switchTab({
						url: 'userInfo'
					});


				} else if (e == '管理课程') {

					console.log("触发管理课程动作");

					uni.switchTab({
						url: 'createCouse',
						uccess: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页
							console.log("触发页面刷新");
							// #endif 
						}
					});

				} else if (e == '') {


				}

			}
		}
	}
</script>

<style>
	.propertyBox {
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
	}


	.content {
		/* 这是指定布局为flex */
		display: flex;
		/* 这是指定布局排列方式 */
		flex-direction: column;

		min-height: 100vh;
		/*100vh == height:100%,元素撑开与屏幕等高*/
	}

	#contentView {
		flex: 1;
	}

	#buttomNavigation {
		width: 100%;
		height: 30px;
		border: 1px solid black;
		display: flex;
		flex-direction: row;
		display: flex;
	}


.
		.scroll-Y {
			height: 30%;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		
		
	.nav {
		flex: 1;
		/*等分*/
		border: 1px solid red;
		font-size: 14px;
	}
</style>